<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0 minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <title>%VITE_APP_TITLE%</title>
  </head>
  <body>
    <div id="app">
      <style>
        * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
        }

        .app-loading {
          position: fixed;
          top: 0;
          left: 0;
          width: 100vw;
          height: 100vh;
          display: flex;
          justify-content: center;
          align-items: center;
          background: linear-gradient(135deg, #667eea 0%, #4b78a2 50%, #93ddfb 100%);
          z-index: 9999;
          overflow: hidden;
        }

        /* 背景动画粒子 */
        .app-loading::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-image: radial-gradient(
              circle at 20% 80%,
              rgba(255, 255, 255, 0.15) 0%,
              transparent 50%
            ),
            radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
            radial-gradient(circle at 40% 40%, rgba(255, 255, 255, 0.08) 0%, transparent 50%);
          animation: float 8s ease-in-out infinite;
        }

        .app-loading-wrap {
          position: relative;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          z-index: 1;
          padding: 20px;
        }

        .app-loading-title {
          margin-bottom: 40px;
          font-size: 32px;
          font-weight: 700;
          color: #ffffff;
          text-align: center;
          letter-spacing: 3px;
          opacity: 0;
          text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
          animation: fadeInUp 1.2s ease-out 0.5s forwards;
        }

        /* 3D魔方Logo */
        .app-loading-logo {
          width: 100px;
          height: 100px;
          margin-bottom: 35px;
          perspective: 1000px;
          opacity: 0;
          animation: fadeInScale 1.2s ease-out 0.2s forwards;
        }

        .cube {
          position: relative;
          width: 100%;
          height: 100%;
          transform-style: preserve-3d;
          animation: rotateCube 4s linear infinite;
        }

        .cube-face {
          position: absolute;
          width: 100px;
          height: 100px;
          border: 2px solid rgba(255, 255, 255, 0.3);
          border-radius: 8px;
          backdrop-filter: blur(10px);
          box-shadow:
            0 0 20px rgba(255, 255, 255, 0.2),
            inset 0 0 20px rgba(255, 255, 255, 0.1);
        }

        .cube-face::before {
          content: '';
          position: absolute;
          top: 50%;
          left: 50%;
          width: 60%;
          height: 60%;
          transform: translate(-50%, -50%);
          border-radius: 4px;
          background: linear-gradient(
            45deg,
            rgba(255, 255, 255, 0.3) 0%,
            rgba(255, 255, 255, 0.1) 50%,
            rgba(255, 255, 255, 0.3) 100%
          );
          animation: pulse 2s ease-in-out infinite;
        }

        /* 魔方六个面 */
        .front {
          background: linear-gradient(135deg, #ff6b6b, #ee5a24);
          transform: rotateY(0deg) translateZ(50px);
        }

        .back {
          background: linear-gradient(135deg, #4834d4, #686de0);
          transform: rotateY(180deg) translateZ(50px);
        }

        .right {
          background: linear-gradient(135deg, #00d2d3, #01a3a4);
          transform: rotateY(90deg) translateZ(50px);
        }

        .left {
          background: linear-gradient(135deg, #ff9ff3, #f368e0);
          transform: rotateY(-90deg) translateZ(50px);
        }

        .top {
          background: linear-gradient(135deg, #feca57, #ff9f43);
          transform: rotateX(90deg) translateZ(50px);
        }

        .bottom {
          background: linear-gradient(135deg, #48dbfb, #0abde3);
          transform: rotateX(-90deg) translateZ(50px);
        }

        /* 现代化加载器 */
        .app-loading-spinner {
          position: relative;
          width: 90px;
          height: 90px;
          opacity: 0;
          animation: fadeIn 1.2s ease-out 0.8s forwards;
        }

        .spinner-ring {
          position: absolute;
          width: 100%;
          height: 100%;
          border-radius: 50%;
          border: 4px solid transparent;
        }

        .spinner-ring:nth-child(1) {
          border-top-color: #ffffff;
          border-right-color: rgba(255, 255, 255, 0.3);
          animation: spin 2s linear infinite;
        }

        .spinner-ring:nth-child(2) {
          border-bottom-color: rgba(255, 255, 255, 0.7);
          border-left-color: rgba(255, 255, 255, 0.2);
          animation: spin 2s linear infinite reverse;
          animation-delay: -0.4s;
          transform: scale(0.8);
        }

        .spinner-ring:nth-child(3) {
          border-top-color: rgba(255, 255, 255, 0.4);
          border-bottom-color: rgba(255, 255, 255, 0.6);
          animation: spin 2.5s linear infinite;
          animation-delay: -0.8s;
          transform: scale(0.6);
        }

        /* 进度条 */
        .app-loading-progress {
          width: 240px;
          height: 6px;
          background: rgba(255, 255, 255, 0.2);
          border-radius: 3px;
          margin-top: 35px;
          overflow: hidden;
          opacity: 0;
          box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
          animation: fadeIn 1.2s ease-out 1.2s forwards;
        }

        .progress-bar {
          height: 100%;
          background: linear-gradient(
            90deg,
            #ffffff 0%,
            rgba(255, 255, 255, 0.9) 50%,
            #ffffff 100%
          );
          border-radius: 3px;
          width: 0%;
          box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
          animation: progressLoad 3.5s ease-in-out infinite;
        }

        /* 加载文本 */
        .app-loading-text {
          margin-top: 25px;
          font-size: 16px;
          color: rgba(255, 255, 255, 0.9);
          font-weight: 500;
          letter-spacing: 1.5px;
          opacity: 0;
          text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
          animation:
            fadeIn 1.2s ease-out 1.5s forwards,
            pulse 2.5s ease-in-out infinite;
        }

        /* 动画定义 */
        @keyframes fadeIn {
          from {
            opacity: 0;
          }
          to {
            opacity: 1;
          }
        }

        @keyframes fadeInUp {
          from {
            opacity: 0;
            transform: translateY(40px);
          }
          to {
            opacity: 1;
            transform: translateY(0);
          }
        }

        @keyframes fadeInScale {
          from {
            opacity: 0;
            transform: scale(0.7) rotate(-10deg);
          }
          to {
            opacity: 1;
            transform: scale(1) rotate(0deg);
          }
        }

        @keyframes rotateCube {
          0% {
            transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
          }
          16.66% {
            transform: rotateX(90deg) rotateY(0deg) rotateZ(0deg);
          }
          33.33% {
            transform: rotateX(90deg) rotateY(90deg) rotateZ(0deg);
          }
          50% {
            transform: rotateX(90deg) rotateY(90deg) rotateZ(90deg);
          }
          66.66% {
            transform: rotateX(180deg) rotateY(90deg) rotateZ(90deg);
          }
          83.33% {
            transform: rotateX(180deg) rotateY(180deg) rotateZ(90deg);
          }
          100% {
            transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
          }
        }

        @keyframes spin {
          from {
            transform: rotate(0deg);
          }
          to {
            transform: rotate(360deg);
          }
        }

        @keyframes rotate {
          from {
            transform: rotate(0deg);
          }
          to {
            transform: rotate(360deg);
          }
        }

        @keyframes bounce {
          0%,
          20%,
          50%,
          80%,
          100% {
            transform: translateY(0) scale(1);
          }
          40% {
            transform: translateY(-15px) scale(1.1);
          }
          60% {
            transform: translateY(-8px) scale(1.05);
          }
        }

        @keyframes float {
          0%,
          100% {
            transform: translateY(0px) rotate(0deg);
            opacity: 0.8;
          }
          33% {
            transform: translateY(-15px) rotate(2deg);
            opacity: 1;
          }
          66% {
            transform: translateY(8px) rotate(-2deg);
            opacity: 0.9;
          }
        }

        @keyframes progressLoad {
          0% {
            width: 0%;
            transform: translateX(-100%);
          }
          50% {
            width: 80%;
            transform: translateX(0%);
          }
          100% {
            width: 100%;
            transform: translateX(0%);
          }
        }

        @keyframes pulse {
          0%,
          100% {
            opacity: 0.9;
            transform: scale(1);
          }
          50% {
            opacity: 1;
            transform: scale(1.02);
          }
        }

        /* 响应式设计 - 移动端优化 */
        @media (max-width: 768px) {
          .app-loading-wrap {
            padding: 15px;
          }

          .app-loading-title {
            font-size: 26px;
            margin-bottom: 30px;
            letter-spacing: 2px;
          }

          .app-loading-logo {
            width: 80px;
            height: 80px;
            margin-bottom: 25px;
          }

          .cube-face {
            width: 80px;
            height: 80px;
          }

          .front,
          .back,
          .right,
          .left {
            transform: rotateY(0deg) translateZ(40px);
          }
          .back {
            transform: rotateY(180deg) translateZ(40px);
          }
          .right {
            transform: rotateY(90deg) translateZ(40px);
          }
          .left {
            transform: rotateY(-90deg) translateZ(40px);
          }
          .top {
            transform: rotateX(90deg) translateZ(40px);
          }
          .bottom {
            transform: rotateX(-90deg) translateZ(40px);
          }

          .app-loading-spinner {
            width: 70px;
            height: 70px;
          }

          .app-loading-progress {
            width: 180px;
            height: 5px;
            margin-top: 25px;
          }

          .app-loading-text {
            font-size: 14px;
            margin-top: 20px;
          }
        }

        @media (max-width: 480px) {
          .app-loading-title {
            font-size: 22px;
            margin-bottom: 25px;
          }

          .app-loading-logo {
            width: 70px;
            height: 70px;
            margin-bottom: 20px;
          }

          .cube-face {
            width: 70px;
            height: 70px;
          }

          .front,
          .back,
          .right,
          .left {
            transform: rotateY(0deg) translateZ(35px);
          }
          .back {
            transform: rotateY(180deg) translateZ(35px);
          }
          .right {
            transform: rotateY(90deg) translateZ(35px);
          }
          .left {
            transform: rotateY(-90deg) translateZ(35px);
          }
          .top {
            transform: rotateX(90deg) translateZ(35px);
          }
          .bottom {
            transform: rotateX(-90deg) translateZ(35px);
          }

          .app-loading-spinner {
            width: 60px;
            height: 60px;
          }

          .app-loading-progress {
            width: 160px;
            margin-top: 20px;
          }

          .app-loading-text {
            font-size: 13px;
            margin-top: 15px;
          }
        }

        /* 横屏适配 */
        @media (orientation: landscape) and (max-height: 500px) {
          .app-loading-wrap {
            flex-direction: row;
            gap: 30px;
          }

          .app-loading-title {
            margin-bottom: 0;
            font-size: 20px;
          }

          .app-loading-logo {
            margin-bottom: 0;
            width: 60px;
            height: 60px;
          }

          .cube-face {
            width: 60px;
            height: 60px;
          }

          .front,
          .back,
          .right,
          .left {
            transform: rotateY(0deg) translateZ(30px);
          }
          .back {
            transform: rotateY(180deg) translateZ(30px);
          }
          .right {
            transform: rotateY(90deg) translateZ(30px);
          }
          .left {
            transform: rotateY(-90deg) translateZ(30px);
          }
          .top {
            transform: rotateX(90deg) translateZ(30px);
          }
          .bottom {
            transform: rotateX(-90deg) translateZ(30px);
          }

          .app-loading-spinner {
            width: 50px;
            height: 50px;
          }

          .app-loading-progress {
            width: 120px;
            margin-top: 0;
          }

          .app-loading-text {
            margin-top: 0;
            font-size: 12px;
          }
        }

        /* 深色模式适配 */
        @media (prefers-color-scheme: dark) {
          .app-loading {
            background: linear-gradient(135deg, #2d1b69 0%, #11998e 50%, #38ef7d 100%);
          }

          .cube-face {
            border-color: rgba(255, 255, 255, 0.2);
          }

          .app-loading-progress {
            background: rgba(255, 255, 255, 0.15);
          }
        }

        /* 高对比度模式 */
        @media (prefers-contrast: high) {
          .app-loading {
            background: linear-gradient(135deg, #000080 0%, #4b0082 100%);
          }

          .app-loading-title,
          .app-loading-text {
            color: #ffffff;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
          }

          .cube-face {
            border: 3px solid #ffffff;
          }
        }

        /* 减少动画偏好设置 */
        @media (prefers-reduced-motion: reduce) {
          .app-loading *,
          .app-loading *::before,
          .app-loading *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
          }

          .app-loading {
            background: linear-gradient(135deg, #97a5e2 0%, #7db5db 100%);
          }
        }

        /* 触摸设备优化 */
        @media (hover: none) and (pointer: coarse) {
          .app-loading-wrap {
            padding: 20px;
          }

          .app-loading-logo,
          .app-loading-spinner {
            transform: scale(1.1);
          }
        }

        /* 超小屏幕设备 */
        @media (max-width: 320px) {
          .app-loading-title {
            font-size: 18px;
            letter-spacing: 1px;
          }

          .app-loading-logo {
            width: 60px;
            height: 60px;
          }

          .cube-face {
            width: 60px;
            height: 60px;
          }

          .front,
          .back,
          .right,
          .left {
            transform: rotateY(0deg) translateZ(30px);
          }
          .back {
            transform: rotateY(180deg) translateZ(30px);
          }
          .right {
            transform: rotateY(90deg) translateZ(30px);
          }
          .left {
            transform: rotateY(-90deg) translateZ(30px);
          }
          .top {
            transform: rotateX(90deg) translateZ(30px);
          }
          .bottom {
            transform: rotateX(-90deg) translateZ(30px);
          }

          .app-loading-spinner {
            width: 50px;
            height: 50px;
          }

          .app-loading-progress {
            width: 140px;
          }

          .app-loading-text {
            font-size: 12px;
          }
        }
      </style>

      <div class="app-loading">
        <div class="app-loading-wrap">
          <div class="app-loading-logo">
            <div class="cube">
              <div class="cube-face front"></div>
              <div class="cube-face back"></div>
              <div class="cube-face right"></div>
              <div class="cube-face left"></div>
              <div class="cube-face top"></div>
              <div class="cube-face bottom"></div>
            </div>
          </div>

          <div class="app-loading-title">%VITE_APP_TITLE%</div>

          <div class="app-loading-spinner">
            <div class="spinner-ring"></div>
            <div class="spinner-ring"></div>
            <div class="spinner-ring"></div>
          </div>

          <div class="app-loading-progress">
            <div class="progress-bar"></div>
          </div>

          <div class="app-loading-text">正在加载中...</div>
        </div>
      </div>
    </div>

    <script type="module" src="/src/main.ts"></script>
    <script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
    <script src="https://open.work.weixin.qq.com/wwopen/js/jwxwork-1.0.0.js"></script>
  </body>
</html>
